import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import axios from 'axios'
import style from './index.module.scss'
import { NavBar, Space } from 'antd-mobile'
import {useNavigate } from 'react-router-dom'
import { ActionBar,Button, Toast, Cell } from 'react-vant'
import { Records, ManagerO,FlowerO   } from '@react-vant/icons'
import {add} from '../../../store/doctor'
import { useAppDispatch, useAppSelector } from '../../../store/store'
const Index: React.FC = () => {
    const { id } = useParams()
    console.log(id)
    const dispatch = useAppDispatch()
    const navigate = useNavigate()
    const [data, setData] = useState<any>({})
    const [guanzhu, setGuanzhu] = useState(() => {
    const storedGuanzhu = localStorage.getItem("guanzhu");
    return storedGuanzhu ? JSON.parse(storedGuanzhu) : false;
  });
    const { list} = useAppSelector((state) =>{
        return state.Doctor})
    const gz=list.find((item:any)=>item.id==id)
    //添加医生
    const addys=(data:any)=>{
        dispatch(add(data))
        Toast.info(gz?'取消备选':'加入备选')
    }
    //请求数据   
    const getlist = async (id: any) => {
        const res = await axios.get('/api/dateid', { params: { id } })
        setData(res.data.data)
         setGuanzhu(res.data.data.flag);
    }
    const geng = async (id2: any) => {
    await axios.get("/api/date", {
      params: { id2 },
    });
    //让前台数据刷新
    getlist(id as any);
  };
    useEffect(() => {
       getlist(id as any);
    }, [])
    return (
        <div>
<NavBar onBack={()=>navigate(-1)}>{data.name}</NavBar>

            <div className={style.box}>

                <div className={style.boxuser}>
                    <div><img src={data.image} alt="" /></div>
                    <div className={style.user}>
                        <div className={style.username}>{data.name}
                            
                     <div onClick={() => geng(data.id)} className={style.gzs }> 
                        <div   onClick={() => Toast.info(guanzhu === true ?'取消关注' :' +关注' )} >{guanzhu === true ?'取消关注' :' +关注' }</div>
                            </div></div>
                        <div>{data.type}</div>
                        <div>{data.hospital
                        }</div>
                        <div>{data.keshi
                        }</div>
                    </div>
                </div>
            </div>
                        <div className={style.js}>
                            {/*
                            空格
                            */}
                            <span>医生简介</span>&nbsp;  {data.name},{data.sex} ,{data.type},{data.hospital},{data.keshi}
                            <div>{data.shanc}</div>
                        </div>
                        <div style={{height: '10px',background:'#f5f5f5'}}></div>
                        <div className={style.sjdd}>
                            <h3>出诊地点与时间</h3> 
                           <div className={style.sjddbox}>
                             <div className={style.sjddbox1title}>
                                {data.address} {data.hospital}
                            </div>
                            <div>暂无出诊信息</div>
                           </div>
                        </div>
                        <ActionBar>
       
        <ActionBar.Icon icon={<FlowerO  />} text='送爱心' /> 
        <ActionBar.Icon icon={<Records  />} text='写评论' /> 
        {
            list.length>0?<ActionBar.Icon  icon={<ManagerO  />} badge={{ content: list.length }} text='备选医生' onClick={()=>navigate('/bxlist')} />
            :<ActionBar.Icon  icon={<ManagerO  />}  text='备选医生'  onClick={()=>navigate('/bxlist')} />
        }
        <ActionBar.Button onClick={()=>addys(data)} color='blue' type='warning' text={gz?'取消备选':'加入备选'} />
        <ActionBar.Button color='orange' type='danger' text='申请服务' />
      </ActionBar>
        </div>
    )
}

export default Index
